<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>X+约课系统 - 绑定会员卡</title>
    <meta name="keywords" content="后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../../static/favicon.ico" th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}" rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" th:href="@{/static/css/font-awesome.css(v='4.4.0')}" rel="stylesheet">
    <link href="../../static/css/animate.css" th:href="@{/static/css/animate.css}" rel="stylesheet">
    <link href="../../static/css/style.css?v=4.1.0" th:href="@{/static/css/style.css(v='4.1.0')}" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="../../static/css/plugins/webuploader/webuploader.css"
     th:href="@{/static/css/plugins/webuploader/webuploader.css}">
    <link rel="stylesheet" type="text/css" href="../../static/css/webuploader-demo.css" 
     th:href="@{/static/css/webuploader-demo.css}">

    <!-- Data Tables -->
    <link href="../../static/css/plugins/dataTables/dataTables.bootstrap.css" th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h2><strong>会员卡批量绑定</strong></h2>
                </div>
                <div class="ibox-content">
                    <div class="page-container">
                        <div id="uploader" class="wu-example">
                            <div class="queueList">
                                <div id="dndArea" class="placeholder">
                                    <div id="filePicker"></div>
                                    <p>点击上传模板文件或将文件拖拽至此区域上传</p>
                                </div>
                            </div>
                            <div class="statusBar" style="display:none;">
                                <div class="progress">
                                    <span class="text">0%</span>
                                    <span class="percentage"></span>
                                </div>
                                <div class="info"></div>
                                <div class="btns">
                                    <div id="filePicker2"></div>
                                    <div class="uploadBtn">开始上传</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="m">
                            <h4><strong>说明</strong></h4>
                            <p>1.点击下载导入会员导入模板<a href="../../static/download/会员卡批量绑定模板.xlsx" th:href="@{/static/download/会员卡批量绑定模板.xlsx}">会员卡批量绑定模板.xlsx</a></p>
                            <p>2.请按照模板中的格式上传</p>
                            <p>3.如果怕误操作,请联系客服人员帮您,当然是免费的哟~</p>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>手机号</th>
                            <th>会员卡</th>
                            <th>失败原因</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>

<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0" th:src="@{/static/js/content.js(v='1.0.0')}"></script>

<!-- Data Tables -->
<script src="../../static/js/plugins/dataTables/jquery.dataTables.js" th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}"></script>
<script src="../../static/js/plugins/dataTables/dataTables.bootstrap.js" th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>


<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = '../../static/js/plugins/webuploader';

    $('.dataTables-example').dataTable({
        "data": [
            {"id":10, "memberPhone": "14977665522","clubCard":"ggagahgjkashgdkgh", "causeFailure": "未知"},
            {"id":10, "memberPhone": "14977895522","clubCard":"ggagahgjahxwecdkg", "causeFailure": ""}
        ],
        //行的定义
        "columns": [
            {"data": "memberPhone"},
            {"data": "clubCard"},
            {"data": "causeFailure"}],
        //去掉搜索
        searching: false,
        lengthChange: false,
        language: {
            "decimal": "",//小数的小数位符号  比如“，”作为数字的小数位符号
            "emptyTable": "没有数据哟~~",//没有数据时要显示的字符串
            "info": "当前 _START_ 条到 _END_ 条 共 _TOTAL_ 条",//左下角的信息，变量可以自定义，到官网详细查看
            /*  "infoEmpty": "无记录",//当没有数据时，左下角的信息*/
            "infoFiltered": "(从 _MAX_ 条记录过滤)",//当表格过滤的时候，将此字符串附加到主要信息
            "infoPostFix": "",//在摘要信息后继续追加的字符串
            "thousands": ",",//千分位分隔符
            "lengthMenu": "每页 _MENU_ 条记录",//用来描述分页长度选项的字符串
            "loadingRecords": "加载中...",//用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示
            "processing": "处理中...",//用来描述加载进度的字符串
            "search": "搜索",//用来描述搜索输入框的字符串
            "zeroRecords": "没有找到",//当没有搜索到结果时，显示
            "paginate": {
                "first": "首页",
                "previous": "上一页",
                "next": "下一页",
                "last": "尾页"
            }
        }
    });


</script>
<script src="../../static/js/plugins/webuploader/webuploader.min.js" th:src="@{/static/js/plugins/webuploader/webuploader.min.js}"></script>

<script src="../../static/js/webuploader_menber_improt.js" th:src="@{/static/js/webuploader_menber_improt.js}"></script>


</body>

</html>
